<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>在线学习技术分享平台</title>
		<link rel="stylesheet" href="../../resources/css/article.css" />
		<link rel="stylesheet" href="../../resources/layui/css/layui.css" />
		<link rel="stylesheet" href="../../resources/xSlider/css/xSlider.css" />
		<script type="text/javascript" src="../../resources/js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="../../resources/xSlider/js/xSlider.js"></script>
		<script type="text/javascript" src="../../resources/layui/layui.all.js"></script>

	</head>

	<body>
		<jsp:include page="/pages/common/header.jsp"></jsp:include>
		<script>
			$(".header").css("opacity", "1");
			$(window).scroll(function() {
				// 滚动条距离顶部的距离 大于 200px时
				if($(window).scrollTop() >= 430) {
					$(".header").css("opacity", "1");
				} else {
					$(".header").css("opacity", ".7");
				}
				if($(window).scrollTop() == 0) {
					$(".header").css("opacity", "1");
				}
			});
		</script>

		<div class="main">
			<!--幻灯片开始-->
			<div class="slider">
				<div class="slider-img">
					<ul class="slider-img-ul">
						<li><img src="../../resources/xSlider/images/slider-5.jpg"></li>
						<li><img src="../../resources/xSlider/images/slider-1.jpg"></li>
						<li><img src="../../resources/xSlider/images/slider-2.jpg"></li>
						<li><img src="../../resources/xSlider/images/slider-3.jpg"></li>
						<li><img src="../../resources/xSlider/images/slider-4.jpg"></li>
						<li><img src="../../resources/xSlider/images/slider-5.jpg"></li>
						<li><img src="../../resources/xSlider/images/slider-1.jpg"></li>
					</ul>
				</div>

			</div>

			<div class="content">
				<div class="artcle_header">
					<a href="" class="tjwz on">推荐文章</a>
					<a href="" class="zxwz ">最新文章</a>
					<a href="" class=" ">已关注</a>
				</div>
				<div class="l_question">
					<ul class="question">
					</ul>
				</div>
				<div class="r_box">
					<div class="r_box_head">
						<span class="layui-icon layui-icon-survey"></span>
						<span>发布文章</span>

					</div>
					<div class="articledit">
						<a href="#" id="addArticle">
							<div class="layui-btn layui-btn-normal" >发布文章</div>
						</a>
					</div>
					<div class="r_box_head">
						<span class="layui-icon layui-icon-fire"></span>
						<span>热门文章</span>

					</div>
					<div class="hot_article">
						<ul class="h_article">
							<li class="h_article_details ">
								<div class="article_img">
									<img src="../../resources/images/A2.jpg" />
								</div>
								<div class="articlecontent">
									<div class="article_title">
										<p class="text"> Spring Cloud netflix概览和架构设计
										</p>
									</div>
									<div class="article_other">
										<span class="sea layui-icon layui-icon-dialogue"></span>
										<span class="count">6</span>
										<span class="layui-icon layui-icon-log"></span>
										<span class="count">115</span>

									</div>
								</div>
							</li>
							<li class="h_article_details">
								<div class="article_img">
									<img src="../../resources/images/A2.jpg" />
								</div>
								<div class="articlecontent">
									<div class="article_title">
										<p class="text"> Spring Cloud netflix概览和架构设计
										</p>
									</div>
									<div class="article_other">
										<span class="sea layui-icon layui-icon-dialogue"></span>
										<span class="count">6</span>
										<span class="layui-icon layui-icon-log"></span>
										<span class="count">115</span>

									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div style="clear: both;"></div>	
				<!--分页-->
				<div id="page">
				</div>
			</div>
		</div>

		<jsp:include page="/pages/common/footer.jsp"></jsp:include>
		<script>
			//			var pageCount =
			$(document).ready(function() {
				var loading = layer.msg('加载中！请稍后....', {
					icon: 16,
					shade: 0.01
				});
				$.ajax({
					type: "post",
					url: "/article/queryAllArticle.action",
					data: {
						"pageCount": 1,
						"pageSize": 7
					},
					dataType: "json",
					success: function(article) {
						console.log(article.row);
						var currpage = article.totalPage;
						var pagecount = article.pageSize;
						layui.use("laypage", function() {
							var laypage = layui.laypage;
							laypage.render({
								elem: 'page',
								count: currpage * pagecount, //总页数
								limit: 7,
								jump: function(obj, first) {
									console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
									console.log(obj.limit); //得到每页显示的条数
									var pageIndex = obj.curr;
									var pageLimit = obj.limit;
									//首次不执行
									if(!first) {
										$(".question").html("");
										toPage(pageIndex, pageLimit);
									}
								}
							});
						});
						$.each(article.row, function(index, item) {
							//循环获取数据 
			
							var articleTypeId = item.articleTypeId;
							var userId = item.userId;
							var articleTitle = item.articleTitle;
							var articleContent = item.articleContent;
							var articleImage = item.articleImage;
							var releaseTime = item.releaseTime;
							if(item.userPhoto == null){
								item.userPhoto="../../resources/images/bg-side-jump.png";
							}
							var li = "<li class='question_box'><div class='l_img'><img src='" + articleImage + "'/></div>";
							li += "<div class='r_content'><div class='r_title'><span class='tag'>" + item.typeValue + "</span><p>" + articleTitle + "</p>";
							li += "<span class='date'>" + releaseTime + "</span></div>" + "<div class='r_text'>" + delHtmlTag(articleContent) + "</div>"
							li += "<div class='r_other'><span class='user_icon'><img src='"+item.userPhoto+"'/></span><span class='name'>"+item.userName+"</span>"
							li += "<span class='layui-icon layui-icon-log'></span><span class='nummber'>"+item.readNumber+"</span><span class='layui-icon layui-icon-dialogue'></span><span class='nummber'>"+item.commentNumber+"</span>"
							li += "<div class='read'><a target='_blank' href='articledetails.jsp?articleId=" + item.articleId + "'><span class='layui-btn layui-btn-normal'>阅读全文</span></a></div></div></li>"
							$(".question").append(li);
						});
						layer.msg('加载成功！！', {
							icon: 1,
							time: 1000,
						});
					},
					error: function() {
						layer.msg("错误", {
							icon: 2,
						});
					}
				});
			});
		</script>
		<script>
			function toPage(pageCount, pageSize) {
				var loading = layer.msg('加载中！请稍后....', {
					icon: 16,
					shade: 0.01
				});
				$.ajax({
					type: "get",
					url: "/article/queryAllArticle.action",
					data: {
						"pageCount": pageCount,
						"pageSize": pageSize
					},
					dataType: "json",
					success: function(article) {
						$.each(article.row, function(index, item) {
							//循环获取数据 
							var articleTypeId = item.articleTypeId;
							var userId = item.userId;
							var articleTitle = item.articleTitle;
							var articleContent = item.articleContent;
							var articleImage = item.articleImage;
							var releaseTime = item.releaseTime;
							if(item.userPhoto == null){
								item.userPhoto="../../resources/images/bg-side-jump.png";
							}
							var li = "<li class='question_box'><div class='l_img'><img src='" + articleImage + "'/></div>";
							li += "<div class='r_content'><div class='r_title'><span class='tag'>" + item.typeValue + "</span><p>" + articleTitle + "</p>";
							li += "<span class='date'>" + releaseTime + "</span></div>" + "<div class='r_text'>" + delHtmlTag(articleContent) + "</div>"
							li += "<div class='r_other'><span class='user_icon'><img src='"+item.userPhoto+"'/></span><span class='name'>"+item.userName+"</span>"
							li += "<span class='layui-icon layui-icon-log'></span><span class='nummber'>"+item.readNumber+"</span><span class='layui-icon layui-icon-dialogue'></span><span class='nummber'>"+item.commentNumber+"</span>"
							li += "<div class='read'><a target='_blank' href='articledetails.jsp?articleId=" + item.articleId + "'><span class='layui-btn layui-btn-normal'>阅读全文</span></a></div></div></li>"
							$(".question").append(li);
						});
						layer.msg('加载成功！！', {
							icon: 1,
							time: 1000,
						});
						
					}
				});
			}
		</script>
		<script>
			//去掉所有的html标记
			function delHtmlTag(str) {
				return str.replace(/<[^>]+>/g, "");
			}
		</script>
		<script>
			$('.slider').xSlider({
				// slider width
				w: 1920,
				// current slide
				current: 0,
				// animation speed
				speed: 500,
				// autoplay interval
				intervalTime: 5000
			})
		</script>
		<script>
			$("#addArticle").click(function() {
				<c:choose>
				<c:when test = "${empty sessionScope.userId}" >
					layer.msg('您还未登陆！', {
						icon: 2,
						time: 2000,
						end: function() {
							var index = layer.open({
								type: 2,
								title: '注册/登陆',
								shadeClose: true,
								area: ['420px', '380px'],
								content: '/pages/relogin/login.jsp'
							});
						}
					}); 
						return false;
				</c:when> 
				<c:otherwise>
						window.location.href=("/pages/article/articledit.jsp")
				</c:otherwise>
			</c:choose>
		})
		</script>
	</body>

</html>